<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>配件详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <style>
        .table > tbody > tr > td {
            height: 30px;
            max-height: 44px;
            padding: 0 2px;
        }

        td {
            position: relative;
        }

        .table .td-value span {
            line-height: 22px;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        .lineOne span {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        p {
            display: inline-block;
            margin-bottom: 0px;
            line-height: 25px;
            padding-right: 15px;
            color: #228bee;
            font-size: 14px;
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            /*display: -webkit-box;*/
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            max-height: 34px;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: black !important;
            color: #2a8cec !important;
        }

        td {
            height: 47.78px;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }


        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
        }

        .nav > li > a {
            padding: 10px 10px;
        }


        .nav-tabs-custom > .nav-tabs > li.active {
            color: #2a8cec;
        }

        .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
            background: #fff;
            color: #2a8cec;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }


        .nav-tabs-custom > .nav-tabs {
            /*border-bottom-color: #fff;*/
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .td-value select {
            color: #2a8cec;
            font-size: 12px;
            padding-left: 1px;
        }

        .td-value span {
            padding-left: 6px;
        }

        textarea {
            height: 56px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            padding-left: 20px;
            padding-top: 0px !important;
        }

        .textareaSpan {
            max-height: 56px;
            line-height: 18px !important;
            overflow: hidden !important;
            text-overflow: ellipsis;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .content {
            padding: 0px 8px;
        }

        .biTian {
            position: absolute;
            color: red;
            margin-left: -10px;
            margin-top: 3px;
        }

        label {
            font-weight: normal;
            margin-bottom: 0px;
        }

        table {
            table-layout: fixed;
        }

        .userName {
            text-align: justify !important;
            display: inline-block !important;
            overflow: hidden !important;
            vertical-align: middle !important;
            height: 24px !important;
            line-height: 24px !important;
            width: 46px !important;
        }

        .userName:after {
            content: " ";
            display: inline-block;
            width: 100%;
        }


        .checkBoxToRadio {
            padding-top: 0.5px;
            background-color: #DEDEDE;
            border: 1px solid #a8a8a8;
            width: 12px;
            height: 12px;
            line-height: 8px;
            text-align: center;
            position: absolute;
            top: 8px;
            border-radius: 3px;
            color: #424242;
            font-weight: bold;
            font-size: 10px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<section class="content iframeH" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="center" style="overflow: auto; height: 100%;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <table class="table table-detail table-bordered text-center" style="table-layout: fixed;">
            <tr>
                <td colspan="2" class="tableTitle">签到信息</td>
            </tr>
            <tr>
                <td class="td-title">公司名称</td>
                <td class="td-value">
                    <select v-model="data.companyId" class="form-control">
                        <option value="" selected>请选择</option>
                        <option v-for="s in companyItems" v-bind:value="s.id">{{s.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td-title">员工类型</td>
                <td class="td-value">
                    <select v-model="data.frontFlag" class="form-control">
                        <option value="" selected>请选择</option>
                        <option value="1" selected>一线员工</option>
                        <option value="0" selected>后台员工</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td-title">签到时间</td>
                <td class="td-value">
                    <input type="text" v-model="data.signDate" @focus="signDatePicker($event)" placeholder="请输入签到时间">
                </td>
            </tr>
        </table>
        <div style="padding: 10px 0;text-align:center;">
            <input type="button" id="pass" class="btn oaBtn btn-sm" @click="save()" value="保存">
        </div>
    </div>
</section>
<!--JQ-->
<!--插件JS-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script>
    window.jQuery || document.write('<script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"><\/script>', '<script src="/dist/plugins/bootstrap/js/bootstrap.min.js"><\/script>', '<script src="/dist/plugins/vue/vue.min.js"><\/script>')
</script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script type="text/javascript">
    function refresh() {
        location.reload();
    }
</script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                var width = $(this).outerWidth();
                if (width < 180) {
                    width = 180;
                }
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": width + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    var api = frameElement.api;
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();

        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.provinceName = val;
                app.cityName = '';
                app.countyName = '';
                app.getCity(id);
                $(".model-select-content .brand").show();

            } else if ($(this).parents(".model-select").hasClass("brand")) {
                $(".model-select-tab a").removeClass("active");
                var id = $(this).attr("attr-id");
                $(".model-select-tab a[data-count=model]").addClass("active");
                $(".model-select").hide();
                app.cityName = val;
                app.countyName = '';
                app.getCounty(id);
                $(".model-select-content .model").show();

            } else {
                app.countyName = val;
                app.businessInfo.business.customerArea = app.provinceName + "-" + app.cityName + "-" + app.countyName
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });
    Vue.directive('onedate', {
        // 当被绑定的元素插入到 DOM 中时……
        update: function (el, binding) {
            // 聚焦元素
            if (app.pageType != 'add') {
                if (el.value == "NaN.undefined" || el.value == "") {
                    el.value = binding.value
                }
            }
        },
        componentUpdated: function (el, binding) {
            // 聚焦元素
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            pageType:$.wyui.getUrlParamObj().pageType,
            data:{
                companyId:"",
                companyName:"",
                frontFlag:"",
                signDate:"",
                createUserId:getCurrentUser().id,
                updateUserId:getCurrentUser().id,
            },
            companyItems:[]
        },
        methods: {
            signDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.data.signDate = dp.cal.getNewDateStr();
                        return true;
                    },
                    dateFmt:'HH:mm'
                });
                $(e.target).blur();
            },
            save:function () {
                var that = this;

                if(that.data.companyId==""){
                    alert("请选择公司")
                }
                if(that.data.frontFlag==""){
                    alert("请选择员工类型")
                }if(that.data.signDate==""){
                    alert("请选择签到时间")
                }
                that.data.signDate

                for(var i=0;i<that.companyItems.length;i++){
                    if(that.companyItems[i].id == that.data.companyId){
                        that.data.companyName=that.companyItems[i].name;
                        break;
                    }
                }
                that.data.updateUserId = getCurrentUser().id;
                $.wyui.postMethod('/signConfig/save.json', that.data, function (data) {
                    alert("保存成功");
                    top.refreshTabByName("签到时间", "no");
                    api.close();
                });
            }
        },
        mounted: function () {
            var that = this;
            $.wyui.postMethod('/company/getCompanyList.json', {}, function (data) {
                that.companyItems = data;
            });
            if("edit"==that.pageType){
                $.wyui.postMethod('/signConfig/getByCompanyId.json', {
                    companyId:$.wyui.getUrlParamObj().companyId,
                    frontFlag:$.wyui.getUrlParamObj().frontFlag
                }, function (data) {
                    $.extend(that.data,data);
                });
            }
        }
    })
</script>
</body>
</html>